<template>
	<el-container class='login_container'>
	  <el-header>
		  欢迎来到登录窗口
	  </el-header>
	  <el-main>
		     <el-form label-width="80px" :model="loginForm" 
			  :rules="loginRules"  ref="loginForm">
		  <!--      用户名-->
		        <el-form-item label="用户名" prop="userName">
		          <el-input  v-model="loginForm.userName" />
		        </el-form-item>
		  <!--      密码-->
		  <!--prop="username"  prop="password" -->
		        <el-form-item label="密码" prop="password">
		          <el-input  v-model="loginForm.password"  type="password"/>
		        </el-form-item>
		  <!--      按钮区域-->
		        <el-form-item class="btns">
		          <el-button type="primary" @click="loginSubmit()">登录</el-button>
		          <el-button type="info">重置</el-button>
		        </el-form-item>
		  
		      </el-form>
	  </el-main>
	</el-container>

</template>

<script>
export default{
	data(){
		return{
			loginForm:{
				userName:'',
				password:''
			},
			loginRules:{
				userName:[
					{required:true,message:'用户名不能为空',triggle:'blur'}
				],
				password:[
					{required:true,message:'密码不能为空',triggle:'blur'}
				]
				
			}
		}
	},
	created(){
		
	},
	methods:{
		loginSubmit(){
			this.$refs['loginForm'].validate(valid =>{
				if(!valid)
				return
				this.$http({
					url:this.$http.adornUrl('/login'),
					methods:'post',
					data:this.$http.adornData({
						'userName':this.loginForm.userName,
						'password':this.loginForm.password
					})
				}).then(({data}) => {
					if(data && data.code === 200){
						this.$cookie.set('token',data.token)
						this.$router.repalace({name:'home'})
					}else{
						this.$message.error(data.value)
					}
				})
				// this.$http.post('login',this.loginForm).then(data=>{
				// 	console.log(data.data)
				// 	if(data.status === 200){
				// 		this.$router.replace({ name: 'home' })
				// 		Vue.prototype.token = data.data
				// 	}
				// })
			})
		}
	}
}
</script>

<style>
	.login_container{
	  height: 100%;
	}
	.el-header{
	    background-color: #B3C0D1;
	    color: #333;
	    text-align: center;
	    line-height: 60px;
		height: auto;
		
	  }
	  .el-main {
	    background-color: #E9EEF3;
	    color: #333;
	    text-align: center;
	    line-height: 160px;
		height: auto;
	  }
</style>
